import 'package:cook_dinner/config/include.dart';
import 'package:cook_dinner/pages/menu_dan/menu_view/menu_list.dart';
import 'package:cook_dinner/pages/menu_dan/menu_view/menu_top_view.dart';
import 'package:cook_dinner/pages/step/step.dart';
import 'package:flutter/material.dart';

class MenuDan extends StatefulWidget {
  const MenuDan({Key? key}) : super(key: key);

  @override
  State<MenuDan> createState() => _MenuDanState();
}

class _MenuDanState extends State<MenuDan> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffFAF7F7),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            backgroundColor: Colors.white,
            toolbarHeight: 30.rpx + HYSizeFit.statusHeight,
            pinned: true,
            centerTitle: true,
            elevation: 0.08,
            leading: InkWell(
              onTap: () => Navigator.pop(context),
              child: Image.asset(
                'assets/images/back_left.png',
                width: 12.rpx,
                height: 24.rpx,
              ),
            ),
            expandedHeight: 313.rpx,
            flexibleSpace: FlexibleSpaceBar(
              background: Container(
                width: HYSizeFit.screenWidth,
                height: 313.rpx,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/meatbanner.png'),
                    fit: BoxFit.cover,
                  ),
                ),
                alignment: Alignment.bottomCenter,
                child: Container(
                  width: double.infinity,
                  height: 40.rpx,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(40.rpx),
                      topRight: Radius.circular(40.rpx),
                    ),
                  ),
                ),
              ),
              collapseMode: CollapseMode.parallax,
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              width: HYSizeFit.screenWidth,
              height: 250.rpx,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(40.rpx),
                  bottomRight: Radius.circular(40.rpx),
                ),
                color: Colors.white,
              ),
              child: const MenuTopView(),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              color: Colors.white,
              padding: EdgeInsets.only(bottom: 12.rpx),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  MenuTitle(
                    title: '食材用料',
                    addText: '添加到购物清单',
                    onTap: () => AppTo.goto(context, AppPage.cart),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                        left: 35.rpx, right: 35.rpx, top: 15.rpx),
                    child: Wrap(
                      children: const [
                        MenuCir(img: 'cr01.png', name: '猪肉', num: '750g'),
                        MenuCir(img: 'cr02.png', name: '酱油', num: '100g'),
                        MenuCir(img: 'cr03.png', name: '黄酒', num: '80g'),
                        MenuCir(img: 'cr04.png', name: '白砂糖', num: '40g'),
                      ],
                    ),
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: Padding(
                      padding: EdgeInsets.only(bottom: 12.rpx, top: 8.rpx),
                      child: Text(
                        '展开',
                        style: TextStyle(
                            color: const Color(0xffFA8303), fontSize: 12.rpx),
                      ),
                    ),
                  ),
                  const MenuTitle(
                    title: '用具',
                    addText: '',
                  ),
                  Container(
                    width: double.infinity,
                    height: 72.rpx,
                    padding: EdgeInsets.only(left: 12.rpx),
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: utensil.length,
                      itemBuilder: (context, index) {
                        return SizedBox(
                          width: 72.rpx,
                          height: 72.rpx,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Image.asset(
                                'assets/images/dr0${index + 1}.png',
                                width: 46.rpx,
                                height: 46.rpx,
                              ),
                              SizedBox(height: 5.rpx),
                              Text(
                                utensil[index],
                                style: TextStyle(
                                  fontSize: 12.rpx,
                                  color: const Color(0xff19140E),
                                ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ],
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Column(
              children: [
                SizedBox(height: 25.rpx),
                MenuTitle(
                  title: '烹饪步骤',
                  addText: '进入步骤模式',
                  onTap: () => AppTo.goto(context, const StepPage()),
                ),
                SizedBox(height: 30.rpx),
              ],
            ),
          ),
          SliverToBoxAdapter(
            child: Column(
              children: const [
                MenuList(
                  index: 1,
                  text1: '1鸡蛋、碗、打蛋器',
                  text2: '用温水多冲洗几下，再浸泡10分钟左右，去除血水',
                ),
                MenuList(
                  index: 2,
                  text1: '1鸡蛋、碗、打蛋器',
                  text2: '用温水多冲洗几下，再浸泡10分钟左右，去除血水',
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
